.governance-dffectiveness-analysis-overview-box {
  width: 446px;
  height: 122px;
  font-family: PuHuiTi-Regular;

  &.red {
    border-radius: 0 0 16px 16px;
    background: linear-gradient(180deg, rgba(246, 110, 44, 0) 0%, rgba(246, 110, 44, 0.16) 100%);
    border-radius: 4px;
    border: 1px solid;
    border-image: linear-gradient(180deg, rgba(246, 110, 44, 0), rgba(246, 110, 44, 0.35)) 1 1;
    border-top: 0;
  }

  &.green {
    background: linear-gradient(180deg, rgba(59, 157, 255, 0) 0%, rgba(59, 157, 255, 0.16) 100%);
    border-radius: 4px;
    border: 1px solid;
    border-image: linear-gradient(180deg, rgba(59, 157, 255, 0), rgba(59, 157, 255, 0.35)) 1 1;
    border-top: 0;
  }

  .title-box {
    height: 31;
    display: flex;
    justify-content: center;
    padding-bottom: 6px;

    &-inner {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 158px;
      position: relative;
      // background-color: #01aaed;
      z-index: 2;

      &.red {
        &::after {
          content: "";
          position: absolute;
          z-index: -1;
          left: 0;
          right: 0;
          //   transform: translate3d(-12px, 0, 0);
          bottom: -10px;
          background: linear-gradient(to top, rgba(246, 110, 44, 0.26) 0%, rgba(246, 110, 44, 0) 100%);
          border: 1px solid;
          border-image: linear-gradient(to top, rgba(246, 110, 44, 0.4), rgba(246, 110, 44, 0)) 1 1;
          border-top: 0;
          width: 100%;
          height: 16px;
          clip-path: polygon(0% 0%, 98.75% 0%, 87.5% 100%, 12.5% 100%, 0% 0%);
          -webkit-clip-path: polygon(0% 0%, 98.75% 0%, 87.5% 100%, 12.5% 100%, 0% 0%);
          //   clip-path: polygon( 0.00% 0.00%, 98.75% 0.00%, 87.50% 100%, 12.50% 100%, 0.00% 0% );
          //   clip-path: polygon( 0.00% 0.00%, 98.67% 0.00%, 86.67% 100%, 13.33% 100%, 0.00% 0% );
          //   clip-path: polygon( 0.00% 0.00%, 98.61% 0.00%, 86.11% 100%, 13.89% 100%, 0.00% 0% );
          //   clip-path: polygon(0% 0%, 98.59% 0%, 90.85% 100%, 8.45% 100%, 0% 0%);
          //   -webkit-clip-path: polygon(0% 0%, 98.59% 0%, 90.85% 100%, 8.45% 100%, 0% 0%);
          // clip-path: polygon( 0.00% 0.00%, 98.59% 0.00%, 85.92% 100%, 14.08% 100%, 0.00% 0% );
          // -webkit-clip-path: polygon( 0.00% 0.00%, 98.59% 0.00%, 85.92% 100%, 14.08% 100%, 0.00% 0% );
        }
      }

      &.green {
        &::after {
          content: "";
          position: absolute;
          z-index: -1;
          left: 0;
          right: 0;
          //   transform: translate3d(-12px, 0, 0);
          bottom: -10px;
          background: linear-gradient(to top, rgba(59, 157, 255, 0.26) 0%, rgba(59, 157, 255, 0) 100%);
          border: 1px solid;
          border-image: linear-gradient(to top, rgba(59, 157, 255, 0.4), rgba(59, 157, 255, 0)) 1 1;
          border-top: 0;
          width: 100%;
          height: 16px;
          clip-path: polygon(0% 0%, 98.75% 0%, 87.5% 100%, 12.5% 100%, 0% 0%);
          -webkit-clip-path: polygon(0% 0%, 98.75% 0%, 87.5% 100%, 12.5% 100%, 0% 0%);
          //   clip-path: polygon( 0.00% 0.00%, 98.75% 0.00%, 87.50% 100%, 12.50% 100%, 0.00% 0% );
          //   clip-path: polygon(0% 0%, 98.59% 0%, 90.85% 100%, 8.45% 100%, 0% 0%);
          //   -webkit-clip-path: polygon(0% 0%, 98.59% 0%, 90.85% 100%, 8.45% 100%, 0% 0%);
          // clip-path: polygon( 0.00% 0.00%, 98.59% 0.00%, 85.92% 100%, 14.08% 100%, 0.00% 0% );
          // -webkit-clip-path: polygon( 0.00% 0.00%, 98.59% 0.00%, 85.92% 100%, 14.08% 100%, 0.00% 0% );
        }
      }
    }
  }

  .divider {
    height: 85px;

    &.red {
      background: linear-gradient(
        180deg,
        rgba(246, 110, 44, 0) 0%,
        rgba(246, 110, 44, 0.32) 47%,
        rgba(246, 110, 44, 0) 100%
      );
    }

    &.green {
      background: linear-gradient(
        180deg,
        rgba(59, 157, 255, 0) 0%,
        rgba(59, 157, 255, 0.32) 52%,
        rgba(59, 157, 255, 0) 100%
      );
    }
  }
}
